<template>
	<view>
		<navbar title="购物车" :isBack="false"></navbar>
		<view class="store-box" v-if="cartList.length > 0">
			<view class="store-list bgf" v-for="(item, index) in cartList" :key="index">
				<view class="title fa jcsb">
					<view class="pick-box fa" @click="selectGoods(index)">
						<image class="pick" src="../../static/pick-fill.png" mode="" v-show="item.selected"></image>
						<image class="pick" src="../../static/pick.png" mode="" v-show="!item.selected"></image>
						<view>选择</view>
					</view>
					<view class="btn-box fa">
						<view class="del fa" @click="delGoods(item.shoppingId)">删除</view>
					</view>
				</view>
				<view class="goods-box fa">
					<view class="goods flex1 flex">
						<image class="goods-img" :src="item.sku.image" mode="" @click="utils.navTo('/pages/cate/goods_detail', {id: item.product.productId})"></image>
						<view class="flex1 flex fdc jcsb">
							<view>
								<view class="name ell2">{{item.product.name}}</view>
								<view class="fa jcsb">
									<view class="minor">{{item.sku.fullName}}</view>
									<view class="count">x{{item.num}}</view>
								</view>
							</view>
							<view class="goods-right fa jcsb">
								<view class="price-box fa">
									<view class="price">¥{{item.sku.price}}</view>
									<view class="market-price">￥{{item.sku.marketPrice}}</view>
								</view>
								<view class="fa">
									<image class="reduce" src="../../static/minus.png" mode="" @click="reduceNumber(index)"></image>
									<input class="count" type="number" v-model="item.num" @input="editNumber(index)" @blur="numberBlur(index)" />
									<image class="plus" src="../../static/plus.png" mode="" @click="plusNumber(index)"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="nodata-box" v-if="nodata">
			<image class="nodata-img" src="../../static/nodata.png" mode=""></image>
			<view class="nodata-prompt">暂无商品~</view>
		</view>
		<view class="operate fa jcsb bgf">
			<view class="fa" @click="selectAll">
				<image class="pick" src="../../static/pick-fill.png" mode="" v-if="isAll"></image>
				<image class="pick" src="../../static/pick.png" mode="" v-else></image>
				<view>全选</view>
			</view>
			<view class="fa">
				<view class="fa">
					<view>合计：</view>
					<view class="total">￥{{total_amount}}</view>
				</view>
				<view class="settled" @click="goSettle">去结算</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: 0,
				cartList: [],
				isAll: false,
				total_amount: 0,
				keyword: '',
				nodata: 0,
				count: 0,
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.getCart()
			this.isAll = false
			this.total_amount = 0
			if(uni.getStorageSync('cartNum')) {
				this.count = uni.getStorageSync('cartNum')
				uni.setTabBarBadge({
					index: 2,
					text: String(this.count)
				})
				setTimeout(() => {
					uni.removeStorageSync('cartNum')
				}, 1000)
			}else {
				uni.removeTabBarBadge({
					index: 2
				})
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getCart()
				this.isAll = false
				this.total_amount = 0
				uni.stopPullDownRefresh()
			}, 1000)
		},
		methods: {
			searchInput() {
				if(this.keyword == '') {
					this.getCart()
				}
			},
			goSearch() {
				if(!this.keyword) return uni.showToast({
					title: '输入关键词搜索',
					icon: 'none'
				})
				this.getCart()
			},
			// 获取购物车数据
			getCart() {
				this.api.cartListFunc().then(res => {
					if(res.code == 200) {
						this.cartList = res.data
						this.cartList.forEach(item => {
							item.selected = 0
						})
						this.nodata = this.cartList.length > 0 ? 0 : 1
					}else {
						this.cartList = []
						this.nodata = 1
					}
				})
			},
			goDetail(id) {
				
			},
			calcPrice() {
				let shoppingIds = []
				this.cartList.forEach(item => {
					if(item.selected) {
						shoppingIds.push(item.shoppingId)
					}
				})
				this.api.cartAmountFunc({
					shoppingIds: shoppingIds.join()
				}).then(res => {
					if(res.code == 200) {
						this.total_amount = res.data
					}
				})
			},
			selectGoods(index) {
				let item = this.cartList[index]
				item.selected = item.selected ? 0 : 1
				this.$set(this.cartList, index, item)
				// this.cartList.forEach((item, idx) => {
				// 	if(idx == index) {
				// 		item.selected = item.selected ? 0 : 1
				// 		return
				// 	}
				// })
				this.isAll = this.cartList.every(item => {
					return item.selected == 1
				})
				this.calcPrice()
			},
			selectAll() {
				if(this.isAll) {
					this.isAll = 0
					this.cartList.forEach(item => {
						item.selected = 0
					})
				}else {
					this.isAll = 1
					this.cartList.forEach(item => {
						item.selected = 1
					})
				}
				this.calcPrice()
			},
			delGoods(id) {
				uni.showModal({
					title: '提示',
					content: '确认删除该商品吗',
					success: result => {
						if(result.confirm) {
							this.api.cartDelFunc({
								shoppingIds: id
							}).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: res.msg
									})
									this.getCart();
									this.api.shoppingCountFunc().then(res => {
										if(res.code == 200) {
											if(res.data > 0) {
												uni.setTabBarBadge({
													index: 2,
													text: String(res.data)
												})
											}else {
												uni.removeTabBarBadge({
													index: 2
												})
											}
										}
									})
								}else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			// 修改数量
			reduceNumber(index) {
				if(this.cartList[index].num > 1) {
					this.cartList[index].num--
					this.countChange(this.cartList[index].shoppingId, Number(this.cartList[index].num))
				}
				this.calcPrice()
			},
			plusNumber(index) {
				this.cartList[index].num++
				this.countChange(this.cartList[index].shoppingId, Number(this.cartList[index].num))
				this.calcPrice()
			},
			editNumber(index) {
				if(this.cartList[index].num == '' || this.cartList[index].num == 0) {
					uni.showToast({
						title: '商品数量需大于0',
						icon: 'none'
					})
				}else {
					this.countChange(this.cartList[index].shoppingId, Number(this.cartList[index].num))
				}
				this.calcPrice()
			},
			numberBlur(index) {
				if(this.cartList[index].num == '' || this.cartList[index].num == 0) {
					this.cartList[index].num = 1
				}
				this.calcPrice()
			},
			countChange(shoppingId, number) {
				this.api.cartAddFunc({
					shoppingId: shoppingId,
					num: number
				}).then(res => {
					if (res.code == 200) {
						
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: '操作失败',
						icon: 'none'
					})
				})
			},
			// 去结算
			goSettle() {
				let token = uni.getStorageSync('token')
				if(!token) {
					uni.showModal({
						title: '提示',
						content: '是否前往登录',
						success: result => {
							if(result.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							}
						}
					})
					return false
				}
				let atLeast = this.cartList.some(item => {
					return item.selected
				})
				if(!atLeast) return uni.showToast({
					title: '请选择商品结算',
					icon: 'none'
				})
				let shoppingIds = []
				this.cartList.forEach(item => {
					if(item.selected) {
						shoppingIds.push(item.shoppingId)
					}
				})
				let params = {
					type: 2,
					ids: shoppingIds
				}
				uni.navigateTo({
					url: '/pages/cate/confirm_order?data=' + encodeURIComponent((JSON.stringify(params)))
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.store-box{
		padding: 16rpx 24rpx 110rpx;
		.store-list{
			margin-bottom: 20rpx;
			padding-bottom: 20rpx;
			border-radius: 16rpx;
			.title{
				padding: 20rpx;
				border-bottom: 2rpx solid #E6E6E6;
				.ordersn{
					font-size: 26rpx;
				}
				.pick-box{
					.pick{
						margin-right: 14rpx;
						width: 36rpx;
						height: 36rpx;
					}
				}
				.similar{
					padding: 0 10rpx;
					height: 44rpx;
					border: 2rpx solid #333;
					border-radius: 6rpx;
					font-size: 24rpx;
				}
				.del{
					padding: 0 12rpx;
					height: 46rpx;
					border-radius: 6rpx;
					font-size: 26rpx;
					color: #777;
					background-color: #F2F2F2;
					.del-icon{
						margin-right: 8rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
			.goods-box{
				margin-top: 20rpx;
				.pick{
					margin-left: 16rpx;
					margin-right: 4rpx;
					width: 36rpx;
					height: 36rpx;
				}
				.goods{
					padding: 0 16rpx 0 24rpx;
					.goods-img{
						margin-right: 20rpx;
						width: 180rpx;
						height: 180rpx;
						border-radius: 8rpx;
					}
					.spec{
						margin-top: 4rpx;
						font-size: 24rpx;
						color: #777;
					}
					.name{
						margin-bottom: 4rpx;
					}
					.count{
						font-size: 26rpx;
						color: #5B5B5A;
					}
					.goods-right{
						padding: 10rpx 0;
						.price-box{
							margin-top: 6rpx;
							width: 220rpx;
							.price{
								font-size: 32rpx;
								font-weight: bold;
								color: #FE3134;
							}
							.market-price{
								margin-left: 6rpx;
								font-size: 22rpx;
								color: #aaa;
								line-height: 26rpx;
								text-decoration: line-through;
							}
						}
						.reduce{
							width: 48rpx;
							height: 48rpx;
						}
						.count{
							margin: 0 10rpx;
							width: 50rpx;
							text-align: center;
						}
						.plus{
							width: 48rpx;
							height: 48rpx;
						}
					}
				}
			}
		}
	}
	.operate{
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 0 20rpx;
		height: 100rpx;
		box-shadow: inset 0 -1rpx 0 0 #E6E6E6;
		z-index: 999;
		.pick{
			margin-right: 10rpx;
			width: 36rpx;
			height: 36rpx;
		}
		.total{
			color: #E9363C;
		}
		.settled{
			margin-left: 20rpx;
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 30rpx;
			text-align: center;
			color: #fff;
			background: var(--theme);
		}
	}
</style>
